<template>
  <div class="ratio-container main-content">
    <div class="ratio">
      <div class="ratio-bar" 
        v-for="(item, index) in data" 
        :key="index"
        :style="{
          width: item.num + '%', 
          background: item.color}" 
        >
      </div> 
    </div>
    <div class="ratio-explain">
      <div class="ratio-explain-item"
        v-for="(item, index) in data" 
        :key="index">
        <span class="ratio-explain-bg" :style="{background: item.color}"></span>
        <span class="ratio-explain-age">{{item.age}}</span>
      </div>
      <span class="ratio-explain-item">(岁)</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: Array
  }
}
</script>
<style lang="less" scoped>
  .main-content {
    padding: 15px;
    .ratio {
      display: flex;
      line-height: 24px;
    }
    .ratio-explain {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 15px;
      .ratio-explain-item {
        color: #5C5C5C;
        font-size: 12px;
        margin-right: 10px;
        margin-top: 5px;
      }
      .ratio-explain-bg {
        display: inline-block;
        width: 8px;
        height: 8px;
      }
      .ratio-explain-age {
        margin-left: 5px;
      }
    }
  }
</style>